<template>
	<view >
		<view class="status_bar"></view>
		<view class="u-p-30">
			<view  style="text-align: center;margin-top:20%;">
				<view class="u-flex u-row-center u-col-center">
					<view>
						<u-image src="/static/main-logo-1.svg" 
								width="100rpx" height="100rpx" border-radius="16rpx">
							<view  slot="error" style="background-color: #ffffff;">
								<u-icon name="camera-fill" :size="100" color="#606266"></u-icon>
							</view>	
						</u-image>
					</view>
				</view>
				<view class="u-m-t-40">
					<view style="font-size:36rpx;font-weight: bold;">
						<text>{{formatMobile()}}</text>
					</view>
				</view>
			</view>
			<view class="u-m-t-60 u-p-l-30 u-p-r-30">
        <view>
						<u-field border-bottom border-top  type="text" :label-width="150"
								 style="padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.name" label="昵称" placeholder="请填写昵称" :maxlength="12"></u-field>
					</view>
					<view>
						<u-field border-bottom border-top  type="text" :label-width="150"
								 style="padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.account" label="账号" placeholder="填写账号（6~20位字母或数字）"></u-field>
					</view>
          <view>
						<u-field border-bottom border-top  type="password" :label-width="150"
								 style="padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.password" label="密码" placeholder="填写密码（6~20位字符）"></u-field>
					</view>
          <view>
						<u-field border-bottom border-top  type="password" :label-width="150"
								 style="padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.repassword" label="确认密码" placeholder="再次输入密码"></u-field>
					</view>
          <view>
						<u-field border-bottom border-top :label-width="150"
								 style="padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.regist_code" label="邀请码" placeholder="邀请码"></u-field>
					</view>
			</view>
		</view>
		<view style="width:100%;position: absolute;bottom: 50rpx;">
			<view class="u-flex u-row-center u-col-center" style="width: 100%; padding: 0 24rpx;">
				<u-button @click="$u.route({url:'/pages/start/wx-login', type: 'redirect'})" style="flex: 1;">登录</u-button>
				<u-button type="success" @click="bindSubmit" style="flex: 1; margin-left: 24rpx;" :loading="loading">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
  import md5 from 'md5'
	export default {
		data() {
			return {
        loading: false,
        avatar:'',
				loginForm:{
          name: '',
					password:'',
          account: '',
          repassword: '',
          regist_code: ''
				}
			};
		},
		
		methods:{
			formatMobile:function(){
				return process.env.VUE_APP_NAME + ' chat';
			},
			async bindSubmit () {
				let data={
          ...this.loginForm
				};
        if (!data.name) return this.globalUtil.utilAlert("请填写用户名");
        if (!/^[A-Za-z0-9]{6,20}$/.test(data.account)) return this.globalUtil.utilAlert("账号请输入6~20位字母或数字");
        if (!/^.{6,20}$/.test(data.password)) return this.globalUtil.utilAlert("密码请输入6~20位");
        if (data.password !== data.repassword) return this.globalUtil.utilAlert("两次密码输入不一致");
				this.loading = true
        try {
          const res = await this.$u.api.sys.register({
            ...data,
            password: md5(data.account + data.password)
          })
          if (res.code !== 200) {
            this.globalUtil.utilAlert(res.message);
            this.loading = false
            return
          }
          this.loading = false
          this.globalUtil.utilAlert("注册成功");

          const loginData={
            account: data.account,
            password: md5(data.account + data.password),
          }
          const loginRes = await this.$u.api.sys.login(loginData)
          const userInfo= loginRes.data.user;
          const token=loginRes.data.token;
          this.$u.vuex("vuex_userInfo",userInfo);
          this.$u.vuex('vuex_token', token);
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/chat/chatGroupList'
            })
          }, 500)
        } catch {
          this.loading = false
        }
			},
		}
	}
</script>

<style lang="scss" scoped>
 .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
	.codeTipBox{
		width: 280rpx;
		background-color: #dddddd;
		color:#909399;
		margin-top: 30rpx;
		margin-left: 140rpx;
		border-radius: 12rpx;
		text-align: center;
		font-size: 30rpx;
		padding:16rpx 24rpx;
	}
</style>
